<template>
  <view class="container">
    <uv-navbar 
      class="bold-title" 
      title="离线异常" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'88rpx'"
    ></uv-navbar>
    <view class="box">
      <view class="device-item" v-for="(item, index) in deviceList" :key="index">
        <view class="item-content">
          <view class="label">设备编号：</view>
          <view class="value">{{ item.F_IMEI }}</view>
        </view>
        <view class="item-content">
          <view class="label">电量：</view>
          <view class="value">{{ item.F_Quantity }}%</view>
        </view>
        <view class="item-content">
          <view class="label">状态：</view>
          <view class="value">{{ item.F_State === 1 ? '在线' : item.F_State === 2 ? '不在线' : '报警' }}</view>
        </view>
        <view class="item-content">
          <view class="label">报警原因：</view>
          <view class="value">{{ item.F_Reason || '无' }}</view>
        </view>
        <view class="item-content">
          <view class="label">是否启用：</view>
          <view class="value">{{ item.F_isEnable === 1 ? '启用' : '未启用' }}</view>
        </view>
        <view class="item-content">
          <view class="label">品牌：</view>
          <view class="value">{{ item.F_brand }}</view>
        </view>
        <view class="item-content">
          <view class="label">创建时间：</view>
          <view class="value">{{ formatDate(item.F_CreateTime) }}</view>
        </view>
        <view class="item-content">
          <view class="label">牧畜编号：</view>
          <view class="value">{{ item.F_LivestockId }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getnecklace } from '@/api/home.js';

const deviceList = ref([]);

const leftClick = () => {
  uni.navigateBack();
};

onMounted(() => {
  fetchOfflineRecords();
});

const fetchOfflineRecords = async () => {
  try {
    const response = await getnecklace();
    if (response.code === 200) {
      deviceList.value = response.data;
    } else {
      uni.showToast({
        title: '获取失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求接口失败', error);
    uni.showToast({
      title: '请求失败',
      icon: 'none'
    });
  }
};

const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}年${String(d.getMonth() + 1).padStart(2, '0')}月${String(d.getDate()).padStart(2, '0')}日`;
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.bold-title {
  font-weight: bold;
}
.box {
  flex: 1;
  background-color: #f3f5f6;
  padding: 20rpx;
}
.device-item {
  background-color: #fff;
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid #ddd;
  border-left: 4rpx solid #ccc;
  border-right: 4rpx solid #ccc;
}
.item-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  padding: 10rpx 0;
  border-bottom: 2rpx solid #eee;
}
.item-content:last-child {
  border-bottom: none;
}
.label {
  color: #333;
}
.value {
  flex: 1;
  text-align: right;
  color: #666;
}
</style>